<template>
  <div class="login">
	<div class="loginCard">
		<el-card>
		  <el-form label-width="80px" :model="login" class="loginForm">
			<el-form-item label="用户:">
			  <el-input v-model="login.name"></el-input>
			</el-form-item>
			<br />
			<el-form-item label="密码:">
			  <el-input v-model="login.password"></el-input>
			</el-form-item>
		  </el-form>
		  
		  <el-radio v-model="radio" label="1">用户</el-radio>
		  <el-radio v-model="radio" label="2">管理员</el-radio>
		  <br />
		  <el-button type="success" @click="tologin()">登录</el-button>
		  <el-button type="success" @click="toregister()">注册</el-button>
		</el-card>
		</div>
  </div>
</template>

<script>
	export default {
		data() {
			return {
				radio:"1",
				login: {
					"name": "",
					"password":"",
				}
			}
		},
		
		methods: {
			tologin() {
				this.$http.post('login/', this.login).then(res => {
					if(res.data.status == 2000){
						window.sessionStorage.setItem("token", res.data.token);
						window.sessionStorage.setItem("user_name", res.data.user.name);
						window.sessionStorage.setItem("u_id", res.data.user.id);
						this.$message.success("登陆成功");
						// console.log(this.radio);
						if (this.radio==2) {
							this.$router.push("/admin/home");
						} else{
							this.$router.push("/user/home");
						}
					}
					else {
						this.$message.error("登陆失败");
					}
					
				})
			},
			toregister() {
				this.$router.push("/register");
			},
		}
		
	}
</script>

<style scoped="scoped">

	.el-card {
		width: 400px;
		height: 400px;
	}
	.login {
		background-color: #575f81;
		height: 100%;
		width:100%;
		position:fixed;
	}
	.loginForm {
		
		margin-top: 100px;
		margin-right: 90px;
	}
	.loginCard {
		margin-top: 100px;
		display: flex;
		justify-content: center;
		text-align: center;
	}
</style>
